<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的等级勋章</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        body{background:#FFF;} 
		.gradeHead{position:relative;padding-top:1.2rem;padding-bottom:0.8rem;}
		.blur{-webkit-filter: blur(40px);filter: blur(40px);}
		.gradeHead .bg{z-index:-1;position:absolute;left:0;top:0;width:100%;height:100%;background-position: center center;background-repeat: no-repeat;background-size: cover;}
		.gradeHead .head{position:relative;}
		.gradeHead .head img{display: block;margin:0 auto;width:1.8rem;border-radius:50%;height:1.8rem;}
		.gradeHead .head i{background: /*linear-gradient(to right,#fe9b74,#ffdfcf)*/#FFF;color: #eda828;position: absolute;top: -0.3rem;left: calc(50% + 1.8rem + 0.3rem);transform: translate(-50%,0);height: 0.6rem;line-height: 0.6rem;padding: 0px 0.15rem;width: 2rem;text-align: center;border-radius: 1rem 1rem 1rem 0;font-size: 0.25rem;}
		.gradeHead .nick{padding:0 3%;text-align:center;color:#FFF;font-weight:bold;font-size:0.34rem;line-height:0.7rem;height:.7rem;margin-top:0.4rem;}
		.gradeHead .nick img{vertical-align: middle;width:0.45rem;height:0.45rem;margin-right:0.25rem;}
		.gradeNav {background:#FFF;} 
		.gradeNav a{height:1rem;line-height:1rem;font-size:0.29rem;border-bottom:1px solid #F9F9F9;color:#747474;float:left;width:33.33333%;text-align:center;position:relative;}
		.gradeNav a.active{color:#eda828;} 
		/*.gradeNav a.active:after{content:" ";position:absolute;bottom:0;left:50%;transform: translate(-50%,0);height:3px;background:#ff643e;border-radius:3px;width:12%;}*/
		.gradeContent{background:#FFF;min-height:calc(100vh - 1.2rem - 2rem - 0.7rem - 0.4rem - 1.8rem);}
		.medal{} 
		.medal ul{padding:0 0.1rem;padding-top:0.3rem;padding-bottom:0.3rem;}
		.medal ul li{float:left;width:calc(100% / 3);text-align:center;color:#747474;font-size:0.28rem;margin-bottom:0.55rem;position:relative;}
		.medal ul li .icon{width:75%;display: block;margin:0px auto;}
		.medal ul li .wenhao{position:absolute;top:41%;left:50%;transform: translate(-50%,-50%);width:0.53rem;height:0.53rem;}
		.shadow{background:rgba(255,255,255,0.75);} 
		.medalFull{position:relative;}
		.medalFull>._c{position:fixed;left:50%;top:39%;transform: translate(-50%,-50%);width:80%;z-index:1001;}
		.medalFull>._c img{width:3rem;display: block;margin:0px auto;}
		.medalFull>._c h3{font-weight:normal;color:#000;font-size:0.39rem;margin-bottom:0.2rem;text-align:center;}
		.medalFull>._c span{color:#000;display: block;margin-bottom:0.3rem;font-size:0.3rem;color:#6a6a6a;}
		.medalFull>._c p{color:#000;display: block;margin-bottom:0.3rem;font-size:0.3rem;color:#6a6a6a;} 
		.medalFull button{display:block;width:100%;margin:0px auto;margin-top:0.5rem;font-size: 0.36rem;font-weight: normal;color: #5ab3ff;line-height: 1rem;height: 1rem;}
		.leavaDiv{padding:0.45rem 3%;} 
		.leave{}  
		.leave ._info{padding:0 4%;}
		.leave ._info .left{float:left;}
		.leave ._info .left span{display: block;font-size:0.28rem;color:#909090;height:0.35rem;line-height:0.35rem;}
		.leave ._info .left h3{display: block;font-weight:bold;font-size:0.3rem;margin-top:0.25rem;height:0.35rem;line-height:0.35rem;}
		.leave ._info .right{float:right;line-height:0.95rem;height:0.95rem;font-size:0.26rem;color:#909090;}
		.leave ._info .right font{margin-left:0.1rem;color:#333;font-size:0.28rem;font-weight:bold;}
		.leave .progress{border-radius:1rem;overflow:hidden;background:#fff4e6;margin:0px auto;margin-top:0.35rem;width:92%;}
		.leave .progress .active{background: linear-gradient(to right,#f7dba7 0,#f7dba7 50%,#e9bd6c 100%);height:0.18rem;border-radius:1rem;}
		.leave .lv{}
		.leave .lv div{float:left;width:calc(100% / 7);text-align:center;color:#efca86;font-size:0.23rem;line-height:0.35rem;margin-top:0.2rem;}
		.leavaDiv .rule{padding:0 4%;margin-top:0.7rem;overflow: hidden;}
		.leavaDiv .rule ._c{margin-top:0.3rem;line-height:0.58rem;color:#747474;font-size:0.29rem;position:relative;}
		.leavaDiv .rule ._c p{color:#747474;font-size:0.29rem;margin-bottom:0.18rem;}
		.ftitle:after{background:#e9bd6c;}
		.moreRule{position: absolute;bottom: 0;left: 0;width: 100%;height:80px;line-height: 110px;background: linear-gradient(to bottom,rgba(255,255,255,0.4),rgba(255,255,255,0.95),#ffffff);text-align:center;color:#333;font-size:15px;border-radius:0px 0px 2px 2px;}
		.record{}
		.record ul{padding:0.65rem 0.45rem 0 0.45rem;}
		.record ul li{margin-bottom:0.85rem;}
		.record ul li:nth-last-child(1){margin-bottom:0;}
		.record ul li a{display:block;}
		.record ul li a img{width:0.8rem;height:0.8rem;border-radius:50%;float:left;}
		.record ul li a .info{float:left;width:calc(100% - 0.8rem);padding-left:0.42rem;}
		.record ul li a .info .left{width:calc(100% - 0.8rem);float:left;padding-right:0.2rem;}
		.record ul li a .info .left h3{font-weight:normal;font-size:0.30rem;color:#575757;height:0.45rem;line-height:0.45rem;}
		.record ul li a .info .left span{color:#a5a5a5;font-size:0.27rem;height:0.45rem;line-height:0.45rem;display:block;margin-top:0.25rem;}
		.record ul li a .info .right{float:left;width:0.8rem;font-size:0.31rem;height:0.9rem;text-align:right;}
		.record ul li a .info .right div{color:#FF0F0F;height:0.3rem;line-height:0.3rem;}
		.loadText{text-align:center;padding:0.4rem 0;}
		 
	</style>
</head>
<body>
    <div id="app" v-cloak>
        <div :class="showMedalFull?'blur':''">
			<div class="gradeHead">
				<i class="bg blur" style="background-image:url('https://www.115z.com/static/user_head/a7be93dabe56182712daaa91357fd601.jpeg');"></i>
				<div class="head">
					<img src="https://www.115z.com/static/user_head/a7be93dabe56182712daaa91357fd601.jpeg" />
					<i>打败99%用户</i>
				</div>
				<h3 class="nick ell"><img src="../../../image/my/v3.png" />MoonSet萤火虫</h3>
			</div> 
			<div class="gradeNav clearfix">
				<a :class="navIndex==0?'active':''" @click="navIndex=0">我的等级</a>
				<a :class="navIndex==1?'active':''" @click="navIndex=1">我的勋章</a>
				<a :class="navIndex==2?'active':''" @click="navIndex=2">我的记录</a>
			</div>
			<div class="gradeContent">
				<div class="leavaDiv" v-show="navIndex==0">
					<div class="leave">
						<div class="_info clearfix">
							<div class="left"><span>当前等级</span><h3>Lv2</h3></div>
							<div class="right">我的成长值<font>572</font></div>
						</div>
						<div class="progress"><div class="active" style="width:calc(100% / 7 * 1)"></div></div>
						<div class="lv clearfix">
							<div>Lv0</div>
							<div>Lv1</div>
							<div>Lv2</div>
							<div>Lv3</div> 
							<div>Lv4</div>
							<div>Lv5</div>
							<div>Lv6</div>
						</div>
					</div>
					<div class="rule">
						<div class="ftitle">等级规则</div>
						<div class="_c">
							<p>一.用户等级越高，获得的佣金将会越高。</p>
							<p>二.新用户默认Lv1，当被扣除成长值降低到Lv0的时候就会触发封禁权限，请联系客服处理。</p>
							<p>三.用户可通过以下方式获得成长值：<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;1.完成通过1个任务，获得1个成长值<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;2.连续登录平台3天，获得1个成长值<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;3.当日内完成100个任务，获得2个成长值</p>
							<p>四.用户需注意以下情节可能会导致扣除成长值：<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;1.提交任务后，被判为未通过，扣除1个成长值<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;2.连续10天未登录平台，扣除1个成长值<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;3.派单人仲裁接单人时判派单人败诉，扣除1个成长值</p>
							<p>五.各个等级拿到的佣金比率：<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;1.Lv0时拿到94%佣金（成长值扣为0的时候会被封权限）<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;2.Lv1时拿到95%佣金。<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;3.Lv2时拿到96%佣金。<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;4.Lv3时拿到97%佣金。<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;5.Lv4时拿到98%佣金。<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;6.Lv5时拿到99%佣金。<br />
							  &nbsp;&nbsp;&nbsp;&nbsp;7.Lv6时拿到100%佣金。</p>
							  <div class="moreRule" onclick="document.querySelector('._c').style.height = 'auto';document.querySelector('.moreRule').style.display = 'none';">点击查看更多</div>
						</div>
					</div>
				</div>
				<div class="medal" v-show="navIndex==1">
					<ul class="clearfix">
						<li @click="showMedalFull = true;"> 
							<img src="../../../image/my/medal1.png" class="icon" />
							积极分子
							<img src="../../../image/my/wenhao.png" class="wenhao" v-if="false" />
						</li>
						<li @click="showMedalFull = true;">
							<img src="../../../image/my/medal2.png" class="icon" />
							悬赏达人
							<img src="../../../image/my/wenhao.png" class="wenhao" v-if="false" />
						</li>
						<li @click="showMedalFull = true;">
							<img src="../../../image/my/medal3.png" class="icon" />
							土豪
							<img src="../../../image/my/wenhao.png" class="wenhao" v-if="false" />
						</li>
						<li @click="showMedalFull = true;">
							<img src="../../../image/my/medal5.png" class="icon" />
							内测达人
							<img src="../../../image/my/wenhao.png" class="wenhao" v-if="false" />
						</li>
						<li @click="showMedalFull = true;">
							<img src="../../../image/my/medal4.png" class="icon" />
							排行NO1.
							<img src="../../../image/my/wenhao.png" class="wenhao" />
						</li>
						<li @click="showMedalFull = true;">
							<img src="../../../image/my/medal6.png" class="icon" />
							守卫者
							<img src="../../../image/my/wenhao.png" class="wenhao" />
						</li>
					</ul>
				</div> 
				<div v-show="navIndex==2" class="record">
					<ul>
					    <li v-for="item in 5">
					        <a class="clearfix">
					            <img src="../../../image/my/add2.png" />
					            <div class="info">
					                <div class="left">
					                    <h3 class="ell">接受任务未通过,ID612</h3>
					                    <span class="ell">12/05 21:23</span>
					                </div>
					                <div class="right ell">
					                    <div style="color:#56B12E">-1</div>
					                </div>
					            </div>
					        </a>
					    </li>
						<li> 
							<a class="clearfix">
								<img src="../../../image/my/medalIcon.png" />
								<div class="info">
									<div class="left">
										<h3 class="ell">获得《积极分子》勋章一枚</h3>
										<span class="ell">12/05 21:23</span>
									</div>
								</div>
							</a>
						</li>
						<li>
							<a class="clearfix">
								<img src="../../../image/my/add1.png" />
								<div class="info">
									<div class="left">
										<h3 class="ell">接受任务通过,ID612</h3>
										<span class="ell">12/05 21:23</span>
									</div>
									<div class="right ell">
										<div>+1</div>
									</div>
								</div>
							</a>
						</li>
					</ul>
					<div class="loadText">
					    <div class="weui-loadmore" v-if="true">
					        <i class="weui-loading"></i>
					        <span class="weui-loadmore__tips">正在加载</span>
					    </div>
					    <span v-else class="over">我已经到底啦！</span>
					</div>
				</div>
			</div>
		</div> 
		
		<!--勋章全屏显示-->
		<div class="medalFull" v-if="showMedalFull">
			<div class="shadow"></div>
			<div class="_c">
				<h3>积极分子</h3>
				<img src="../../../image/my/medal1.png" />
				<span>获得时间：2019-12-15</span>
				<p>满足条件：累计完成通过任务20个以上。</p>
				<p>获得人数：1321人</p>
				<button @click="showMedalFull=false">我知道了</button>
			</div>
		</div>
    </div>
    <script type="text/javascript">
        apiready = function() {
             
        }
		var app = new Vue({
		    el:'#app',
		    data:{
				iosTest:false,
				showMedalFull:false,
				navIndex:2,
		    },
		    methods:{
				
		    },
		    mounted(){
				$.initJs(this);
				
				setTimeout(function(){
					if(document.querySelector("._c").offsetHeight > 150){
						document.querySelector("._c").style.height = "150px";
					}else{
						document.querySelector(".moreRule").style.display = "none";
					}
				},0);
		    }
		});
    </script>
</body>
</html>
